﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nav可左右滑动导航栏-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
ul {
	overflow:hidden;
	position:relative;
	list-style:none;
}
ul li {
	float:left;
	padding:10px 20px;
	background:skyblue;
	color:#fff;
	font-size:20px;
	cursor:pointer;
	transition:all .2s linear;
}
ul span {
	display:block;
	width:100%;
	height:2px;
	background:#f60;
	position:absolute;
	bottom:0;
}
ul li:hover {
	color:red;
}
</style>
</head>
<body>
<ul>
    <li>导航栏1</li>
    <li>导航栏2</li>
    <li>导航栏3</li>
    <li>导航栏4</li>
    <li>导航栏5</li>
    <span class="line"></span>
</ul>

<script>
$("ul span").css({
    'left': $("ul li").eq(0).position().left,
    'width': $("ul li").eq(0).outerWidth()
});
$("ul li").hover(function() {
    $("ul span").stop().animate({
        left: $(this).position().left,
        width: $(this).outerWidth()
    });
}, function() {
    $("ul span").stop().animate({
        left: $("ul li").eq(0).position().left,
        width: $("ul li").eq(0).outerWidth()
    });
})
</script>

</body>
</html>
